<template>
  <div :class="classes" @click="!disabled&&$emit('click')">
    <span v-if="label" class="action-button-label">{{label}}</span>
    <CommonIcon v-if="icon" :style="styles" :type="icon" :color="iconColor"
      :size="size" />
    <span v-if="content">{{content}}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ActionButton',
  props: {
    // 禁用鼠标悬停效果
    disHover: {
      type: Boolean,
      default: () => false
    },
    icon: {
      type: String
    },
    iconColor: {
      type: String
    },
    size: {
      type: Number,
      default: () => 32
    },
    label: {
      type: String
    },
    content: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    transform: {
      type: String
    },
    active: {
      type: Boolean,
      default: () => false
    },
    inLine: {
      type: Boolean,
      default: () => false
    }
  },
  computed: {
    classes() {
      return {
        'action-button': true,
        'action-button-hoverable': !this.disHover,
        'action-button-disable': this.disabled,
        'action-button-active': this.active,
        'action-button-inline': this.inLine,
        'action-button-flex': !this.inLine
      };
    },
    styles() {
      return {
        transform: this.transform
      };
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../../../framework/assets/styles/theme.less';
.action-button {
  padding: 8px;
  height: inherit;
  align-items: center;
  justify-items: center;
  user-select: none;
  color: @title-color;
  position: relative;

  &-label {
    display: flex;
    align-items: center;
    margin-right: 8px;
    word-break: keep-all;
  }
  &-desc {
    color: @disable-color;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
  }

  &-inline {
    display: inline-flex;
  }
  &-flex {
    display: flex;
  }

  &.action-button-disable {
    opacity: 0.3;
    cursor: no-drop;

    color: #999;
    filter: grayscale(100%);
    background-color: #fbfbfb;
  }

  &.action-button-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: @primary-color;
  }

  & svg,
  & i {
    transition: transform 0.2s ease;
    & + * {
      margin-left: 6px;
    }
  }

  &.left-border:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: @border-color-base;
  }

  &-hoverable:not(.action-button-disable) {
    cursor: pointer;

    &:hover:not(:active):not(.action-button-active) {
      background-color: tint(@background, 20%);
    }

    &:active:not(.action-button-active) {
      background-color: shade(@background, 5%);
    }
  }
}
</style>
